<template>
  <div class="em-container">
    <!--     <div class="close-button" @click="closePanel"><i class="el-icon-close"></i></div>
 -->
    <ul class="list-group list-group-striped">
      <li class="popup-group-item">
        <label>属性</label>
        <div class="pull-left">
          <el-select v-model="EmK.value" size="small" placeholder="请选择">
            <el-option
              v-for="item in EmOptions"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </div>
      </li>
      <li class="popup-group-item">
        <label>数值</label>
        <div class="pull-left">
          <span>最大值</span>
          <el-input-number
            class="numsty"
            v-model="EmK.num1"
            :step="0.1"
            controls-position="right"
            size="mini"
            :min="1"
            :max="EmK.num2"
          ></el-input-number>
          <span>最小值</span>
          <el-input-number
            class="numsty"
            v-model="EmK.num2"
            :step="0.1"
            controls-position="right"
            size="mini"
            :min="EmK.num1"
            :max="10"
          ></el-input-number>
        </div>
      </li>
      <li class="popup-group-item">
        <label>颜色切换</label>
        <div class="pull-left colorSelect">
          <el-select
            v-model="EmK.colorValue"
            size="small"
            placeholder="请选择"
            :style="{
              background: EmK.colorValue ? EmK.colorValue : '#fff',
            }"
          >
            <el-option
              v-for="item in optionsColor"
              :key="item.label"
              :label="item.label"
              :value="item.label"
              :style="{ background: item.label }"
            >
            </el-option>
          </el-select>
        </div>
      </li>
      <li class="popup-group-item">
        <label>不透明度</label>
        <div class="pull-left">
          <div class="sliderbox">
            <el-slider v-model="EmK.sliderValue" input-size="mini"></el-slider>
          </div>
        </div>
      </li>
      <li class="popup-group-item">
        <label>操作</label>
        <div class="pull-left">
          <el-button size="small">还原</el-button>
          <el-button type="primary" size="small">应用</el-button>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "emAttrPanel",
  props: {},
  data() {
    return {
      showPanel: false,
      //EM属性选择
      EmOptions: [
        {
          label: "EC475Hz[mS/m]",
        },
        {
          label: "EC1625Hz[mS/m]",
        },
        {
          label: "EC5475Hz[mS/m]",
        },
        {
          label: "EC18575Hz[mS/m]",
        },
        {
          label: "TotalEC[mS/m]",
        },
        {
          label: "MSusc475Hz[1/1000]",
        },
        {
          label: "MSusc1625Hz[1/1000]",
        },
      ],
      optionsColor: [
        {
          value: "1",
          label: "#FFF200",
        },
        {
          value: "2",
          label: "#232B99",
        },
      ],
      zuanK: {
        value: "六价铬",
        colorValue: null,
        checked2: false,
        num1: 1,
        num2: 10,
        sliderValue: 15,
      },
      EmK: {
        value: "EC475Hz[mS/m]",
        colorValue: null,
        checked2: false,
        num1: 1,
        num2: 10,
        sliderValue: 15,
      },
      ertK: {
        color: "rgba(255,0,0,1)",
        checked2: false,
        endTime: null,
        startTime: null,
        width: 5,
        sliderValue: 15,
        checked3D: false,
        checkedErro: false,
      },
    };
  },
  created() {},
  methods: {
    show(val) {
      this.showPanel = val;
    },
    closePanel() {
      this.showPanel = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.em-container {
  width: 100%;
  height: 100%;
  .close-button {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 6px;
  }
}
.popup-group-item {
  border: none;
  padding: 2px 0px;
  display: flex;
  align-items: center;
}
.popup-group-item {
  label {
    margin-left: 5%;
    display: inline-block;
    width: 20%;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
.popup-group-item .pull-left {
  height: 40px;
  display: flex;
  align-items: center;
  text-align: left;
  width: 72%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  label {
    width: 100%;
  }
  .el-checkbox {
    // margin-top: 10px;
  }
  .numsty {
    width: 70px;
    margin-left: 5px;
    margin-right: 5px;
  }
  .sliderbox {
    width: 100%;
    padding: 0px 20px;
  }
}
</style>
